<@>layout("/common/default.html"){
<link rel="stylesheet" href="${ctxPath}/static/zTree3.5/css/demo.css" type="text/css">
<link rel="stylesheet" href="${ctxPath}/static/zTree3.5/css/metroStyle/metroStyle.css" type="text/css">
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${ctxPath}/static/zTree3.5/js/jquery.ztree.exedit.js"></script>


<style>
    div#menubody {
        padding: 10px;
        line-height: 800px;
        text-align: center;
        background-color: #DFDFDF;
        border: 1px solid silver;
        padding: 15px 20px 20px 20px;
        color: #fff;
    }

    div#edit-div {
        margin-left: 0px;
        padding: 10px;
        text-align: center;
        padding: 15px 20px 20px 20px;
        background-color: white;
        border: 0px solid silver;
    }

    div#qx_menu {
        position: absolute;
        visibility: hidden;
        top: 0;
        text-align: left;
        padding: 2px;
    }

    div#qx_menu ul li {
        margin: 1px 0;
        padding: 0 5px;
        cursor: pointer;
        list-style: none outside none;
        border: 1px solid #617775;
        background-color: #DFDFDF;
    }

    ul#menu-tree {
        margin: 0;
        padding: 8px;
        color: #E9E7E7;
        background-color: #DFDFDF;
        font-size: 17px;
        height: auto;
        width:100%;
        border: 0px;
        overflow-y:auto;
    }

    li {
        padding: 6px;
    }

    span {
        list-style: none;
        text-align: left;
        white-space: nowrap;
    }

    .ztree * {
        font-size: 15px;
    }
</style>

<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <span lay-separator="">/</span>
        <a href="">用户权限</a>
        <span lay-separator="">/</span>
        <a>
            <cite>192.168.144.70</cite>
        </a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-card">
            <div class="layui-card-body layui-row layui-col-space10">
                <div class="layui-col-md6" id="menubody" >
                    <div id="menu" >
                        <ul id="menu-tree" class="ztree"></ul>
                    </div>
                </div>
                <div class="layui-col-md6" id="edit-div">
                </div>
            </div>
        </div>
    </div>
</div>

<div id="qx_menu">
    <ul>
        <li id="add" onclick="addEqual();">增加菜单</li>
        <li id="add_son" onclick="addSon()">增加子菜单</li>
        <li id="del" onclick="del();">删除菜单</li>
    </ul>
</div>

<script>
    var menuTree;
    var rMenu = $("#qx_menu");
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid"
            },
            key: {
                name: "name"
            }
        },
        callback: {
            onClick: menuOnClick,
            onRightClick: onRightClick
        }
    };

    $(function () {
        reLoadTree()
    });

    function menuOnClick(event, treeId, treeNode) {
        var id = treeNode.id;
        $.ajax({
            url: '${ctxPath}/menu/edit?id=' + id,
            dataType: 'html',
            date: {id: id},
            type: 'post',
            success: function (data) {
                layui.use('form', function () {   //  页面加载进去时需要重新渲染JS，单选框等都要这么个操作
                    var html = $(data);
                    $('#edit-div').html(html);
                    var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                    form.render();
                });
            },
            error: function (e) {
                console.info(e);
            }
        });
    }

    function onRightClick(event, treeId, treeNode) {
        if (treeNode) {
            $('#add').show();
            $('#add_son').show();
            $('#del').show();
        } else {
            $('#add').show();
            $('#add_son').hide();
            $('#del').hide();
        }
        menuTree.selectNode(treeNode);
        showRMenu(event.clientX, event.clientY);
    }

    function showRMenu(x, y) {

        $("#qx_menu ul").show();

        rMenu.css({"top": y + "px", "left": x + "px", "visibility": "visible"});
        $("body").bind("mousedown", onBodyMouseDown);
    }

    function onBodyMouseDown(event) {
        if (!(event.target.id == "qx_menu" || $(event.target).parents("#qx_menu").length > 0)) {
            rMenu.css({"visibility": "hidden"});
        }
    }

    function addEqual() {
        //如果空白点击，增加顶级菜单
        var pNode = menuTree.getSelectedNodes()[0];
        if (!pNode) {
            var id = '';
            $.ajax({
                url: '${ctxPath}/menu/addequal',
                dataType: 'html',
                date: {id: id},
                type: 'post',
                success: function (data) {
                    layui.use('form', function () {   //  页面加载进去时需要重新渲染JS，单选框等都要这么个操作
                        var html = $(data);
                        $('#edit-div').html(html);
                        var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                        form.render();
                    });
                },
                error: function (e) {
                    console.info(e);
                }
            });
        } else {
            //如果菜单点击，增加同级菜单
            var id = pNode.id;
            $.ajax({
                url: '${ctxPath}/menu/addequal?id=' + id,
                dataType: 'html',
                date: {id: id},
                type: 'post',
                success: function (data) {
                    layui.use('form', function () {   //  页面加载进去时需要重新渲染JS，单选框等都要这么个操作
                        var html = $(data);
                        $('#edit-div').html(html);
                        var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                        form.render();
                    });
                },
                error: function (e) {
                    console.info(e);
                }
            });
        }
    }

    function addSon() {
        //增加子菜单
        var pNode = menuTree.getSelectedNodes()[0];
        var id = pNode.id;
        $.ajax({
            url: '${ctxPath}/menu/addson?id=' + id,
            dataType: 'html',
            date: {id: id},
            type: 'post',
            success: function (data) {
                layui.use('form', function () {   //  页面加载进去时需要重新渲染JS，单选框等都要这么个操作
                    var html = $(data);
                    $('#edit-div').html(html);
                    var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                    form.render();
                });
            },
            error: function (e) {
                console.info(e);
            }
        });

    }

    function del() {
        //删除选中菜单
        var pNode = menuTree.getSelectedNodes()[0];
        console.log(pNode.id);
        layer.confirm('确定删除' + pNode.name + '节点？', function () {
            $.cajax('${ctxPath}/ajax/userpermission/menu/del', {
                'id': pNode.id
            }, function (r) {
                var code = r.code;
                var msg = r.msg;
                if (code == '1') {
                    $.msg(msg, function () {
                        window.location.href = "${ctxPath}/menu/tomenu";
                        ;
                    });
                } else {
                    $.msg(msg, function () {
                    }, 2);
                }
            });
        })
    }

    //提交
    layui.use("form", function () {
        var form = layui.form;
        form.on('submit(menu-add)', function () {
            $.cajax('${ctxPath}/ajax/userpermission/menu/update',$('#menu-msg').serialize(),function (r) {
                var code = r.code;
                var msg = r.msg;
                if (code == 1){
                    $.msg(msg,function () {
                        reLoadTree()
                    },code);
                }else {
                    $.msg(msg,function () {

                    },2);
                }
            });

        });
        form.on('submit(menu-detail)', function () {
            $.cajax('${ctxPath}/ajax/userpermission/menu/update',$('#menu-data').serialize(),function (r) {
                var code = r.code;
                var msg = r.msg;
                if (code == 1){
                    $.msg(msg,function () {
                        reLoadTree()
                    },code);
                }else {
                    $.msg(msg,function () {

                    },2);
                }
            });
        });
    })
    
    function reLoadTree() {
        $.cajax('${ctxPath}/ajax/userpermission/menu/tree', {}, function (r) {
            var code = r.code;
            var msg = r.msg;
            if (code == '1') {
                var menuNodes = r.datas;
                menuTree = $.fn.zTree.init($("#menu-tree"), setting, menuNodes);
                rMenu = $('#qx_menu');
            } else {
                $.msg(msg, function () {
                }, 2);
            }
        });
        
    }


</script>

<hr>
<@>}